<template>
	<div class="siting" ref="mainRight">
	<!-- 头部图标页面名称 -->
	<div class="main-icon">
		<!-- btn2 -->
		<div class="bottom">
			<div class="main-icon-a">
				<i class="el-icon-zyyp"
					style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #409EFF;color: #fff;"></i>
				<span style="font-size: 12px;font-weight:400;margin-left: 12px;">中药药房申领</span>
			</div>
			<!-- btn1 -->
			<div class="main-icon-zzgl">
				<span style="font-size: 12px;color: #606266;margin-left: 18px;">状态：</span>
				<el-dropdown @command="handleCommand" trigger="click">
					<span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down"></i></span>
					<el-dropdown-menu slot="dropdown">
					  <el-dropdown-item v-for="(v,i) in selecteds" :key="i" :command="v.command">{{ v.title }}</el-dropdown-item>
					</el-dropdown-menu>
			    </el-dropdown>
			</div>
			<!-- dateTimer -->
			<div class="block" style="margin-left: 10px;display: flex;">
				<el-date-picker v-model="startTime" type="datetime" size="mini" placeholder="选择开始时间" align="right" 
					:picker-options="pickerOptions" @change="startDateHandle"> 
				</el-date-picker>
				<el-date-picker v-model="endTime" type="datetime" style="margin-left: 8px;" size="mini" placeholder="选择结束时间" align="right"
					:picker-options="pickerOptions" @change="endDateHandle">
				 </el-date-picker>
			</div>
			<!-- 申请科室 -->
			<span style="font-size: 12px;color: #606266;display: inline-block;margin-left: 12px;">申请科室：</span>
			<el-select v-model="selectedValue" filterable placeholder="请选择" size="mini">
				<el-option
				  v-for="item in optionks"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			</el-select>
			<!-- 供货单位 -->
			<span style="font-size: 12px;color: #606266;display: inline-block;margin-left: 12px;">供货单位	：</span>
			<el-select v-model="selectedValue" filterable placeholder="请选择" size="mini">
				<el-option
				  v-for="item in GHoptions"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			</el-select>
			<!-- btn3 -->
			<el-button v-for="(v,i) in feetBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="small" plain
				@click="feetHandClick(i)" style="margin-left: 12px;">{{ v.title }}
			</el-button>
		</div>
	</div>
	<!-- table -->
	<div class="table">
		<el-table :data="tableData" :style="{ width: windowWidth + 'px' }"
		highlight-current-row @current-change="handleCurrentTableChange" @row-dblclick="rowDblclick">
		<!-- 表格行下拉展示 -->
		<el-table-column type="expand" fixed="left">
		  <template slot-scope="props">
			<el-form label-position="left" inline class="demo-table-expand" @toggleRowExpansion="changeProps(row)">
			  <el-form-item label="系统序号:"><span>{{ props.row.id }}</span></el-form-item>
			  <el-form-item label="单据编号:"><span>{{ props.row.docNum }}</span></el-form-item>
			  <el-form-item label="供货单位:"><span>{{ props.row.supplierName }}</span></el-form-item>
			  <el-form-item label="业务日期:"><span>{{ props.row.busDate }}</span></el-form-item>
			  <el-form-item label="状态:">
				<!-- 状态显示 -->
				<el-steps :space="200" :active="calcActive(props.row.state)" finish-status="success">
				  <el-step v-for="(item,index) in statusOption" :key="item.id" :title="item.label"></el-step>
				</el-steps>
			  </el-form-item>
			</el-form>
		  </template>
		</el-table-column>
		<!-- 表格行rows -->
		<el-table-column prop="id" label="系统序号"></el-table-column>
		<el-table-column prop="status" label="状态">
			 <template slot-scope="{ row }">
				<!-- 根据state显示不同的图标 -->
				<i :class="statusIconMap[row.state]" :style="{ color: statusColorMap[row.state] }"></i>
				<span>{{ statusMap[row.state] || '未知状态' }}</span>
			</template>
		</el-table-column>
		<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
		<!-- fixed -->
		<el-table-column fixed="left" label="行号" type="index" width="68" align="center"></el-table-column>
		<!-- edit -->
		<el-table-column fixed="right" label="操作" width="88">
			  <template slot-scope="scope">
				<div class="editbox" v-if="scope.row.state == 0" style="text-align: center;">
					<el-link type="info" @click="handleClickEdit(scope.row)" size="mini">修改</el-link>
					<el-link type="danger" @click="handleDelete(scope.row)" size="mini">删除</el-link>
				</div>
				<div class="editbox" v-else style="text-align: center;">
					<!-- 根据state显示不同的图标 -->
					<i :class="statusIconMap[scope.row.state]" :style="{ color: statusColorMap[scope.row.state] }"></i>
					<span>{{ statusMap[scope.row.state] || '未知状态' }}</span>
				</div>
			  </template>
			</el-table-column>
		</el-table>
	</div>
	<!-- 分页 -->
	<el-pagination
	style="margin: 12px;"
	@size-change="handleSizeChange"
	@current-change="handleCurrentChange"
	:current-page="pageNum"
	:page-sizes="[10,20,50]"
	:page-size="pageSize"
	:total="totalSize"
	layout="total, sizes, prev, pager, next, jumper"
	background>
	</el-pagination>
	<!-- feet -->
	<div class="feet">
		<el-button v-for="(v,i) in feetBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="small" plain @click="feetHandClick(i)">{{ v.title }}</el-button>
	</div>
	<!-- add dialog -->
	<div class="addDiglog">
	<!-- <el-dialog title="新增采购计划" :visible.sync="addDialogVisible" width="68%" :before-close="handleClose"> -->
		<addPharmacyDiglog ref='sonRef' @Update="loadData" :parent-method="loadData"></addPharmacyDiglog>
	<!-- </el-dialog> -->
	</div>
	<!-- 修改 -->
	<div class="editdiglog">
		<!-- <editDiglog ref='editSonRef' @Update="loadData" :parent-method="loadData"></editDiglog> -->
	</div>
	<!-- 审核过单 -->
	<div class="editdiglog">
		<!-- <exaDiglog ref='exaRef' @Update="loadData" :parent-method="loadData"></exaDiglog> -->
	</div>
	</div>

</template>

<script>
	// selfs / props
	import addPharmacyDiglog from "./addPharmacyDiglog.vue";
	// selfs / js
	import addForm from './addForm.js' //Form表单
	// xter
	// 接口
	import { TcmPage,toExamineTcm } from "@/api/systemCatalogue/traMedici.js";
	export default{
		inject: ['reload'], // 无痕刷新
		components:{
			addPharmacyDiglog
			// ,exaDiglog,editDiglog
		},
		data(){
			return{
				// str
				windowWidth:'', //右侧表格动态宽度
				iconComes:'el-icon-shopping-cart-2',
				CatalogueName:'采购计划',
				DropDownedName:'全部单据',
				selectedValue:'',
				// blean
				loading:false,
				dialogVisible:false,
				gdDialogVisible: false,
				auditStatus:'',
				startTime:'', //开始时间
				endTime:'', //结束时间
				formattedDate: '', // 用于存储格式化后的日期时间
				// number
				pageNum: 1, //当前页currentPage
				pageSize: 10,
				totalSize: 0, //总条数
				// arr title右侧按钮
				headerBtn:[
				 { refesh:"refesh", title:"刷新", type:"primary", icon:"el-icon-refresh" },
				 { senior:"senior", title:"高级", type:"primary", icon:"" },
				 ],
				 
				selecteds:[
				  { title:"全部单据", command:"a" },{ title:"已提交", command:"b" },{ title:"已审核", command:"c" },
				  { title:"已过单", command:"d" },{ title:"已作废", command:"e" },
				  ],
				feetBtn:[
				 { refesh:"refesh", title:"冲销", type:"primary", icon:"el-icon-upload2" },
				 { refesh:"refesh", title:"新增", type:"primary", icon:"el-icon-edit" },
				 { refesh:"refesh", title:"提交", type:"primary", icon:"el-icon-finished" },
				 { refesh:"refesh", title:"审核", type:"primary", icon:"el-icon-document-checked" },
				 { refesh:"refesh", title:"过单", type:"primary", icon:"el-icon-sort" },
				 { refesh:"refesh", title:"查看明细", type:"primary", icon:"el-icon-printer" },
				 // { refesh:"refesh", title:"打印", type:"primary", icon:"el-icon-printer" },
				 // { refesh:"refesh", title:"导出", type:"primary", icon:"el-icon-finished" },
				 // { refesh:"refesh", title:"关闭", type:"primary", icon:"el-icon-close" },
				 ],
				optionks:[{title:'西药库',value:'西药库'}],
				// 单据状态 0 草稿,1 回退提交,2 已提交,3 回退审核,4 已审核,5 已过单,6 已作废'
				statusOption:[
					{id:0,label:'草稿'},{id:1,label:'回退提交'},{id:2,label:'已提交'},{id:3,label:'回退审核'},{id:4,label:'已审核'},{id:5,label:'已过单'},{id:6,label:'已作废'},
				], 
				GHoptions:[{title:'绥江县天高虎电脑科技',value:'绥江县天高虎电脑科技'},{title:'宜宾骅光医疗器械有限公司',value:'宜宾骅光医疗器械有限公司'},{title:'云南澳敦贸易有限公司',value:'云南澳敦贸易有限公司'}],
				options:[{value: '制单时间',label: '制单时间'},{value: '过单时间',label: '过单时间'},{value: '操作时间',label: '操作时间'},{value: '业务日期',label: '业务日期'}],
				currentTable: [],//表格单选
				tableRows:[
					{ name:"单据类别", prop:"docNum", type:"" },{ name:"供货单位", prop:"supplierName", type:"" },
					{ name:"业务日期", prop:"busDate"},{ name:"库房名称", prop:"totalAmt"},
					{ name:"药房名称", prop:"createName", type:"" },{ name:"成本金额", prop:"createTime", type:"" },
					{ name:"零售金额", prop:"reviewName", type:"" },{ name:"备注", prop:"reviewTime", type:"" },
					{ name:"制单人", prop:"passingOrdersName", type:"" },{ name:"制单时间", prop:"passingOrdersTime", type:"" },
					{ name:"审核人", prop:"nullifyId", type:"" },{ name:"审核时间", prop:"nullifyTime", type:"" },
					{ name:"过单人", prop:"nullifyId", type:"" },{ name:"过单时间", prop:"nullifyTime", type:"" },
				],
				pickerOptions: {
				  shortcuts: [
					{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); }}, 
					{ text: '昨天', onClick(picker) { const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
					{ text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}},
					{ text: '最近一个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', date);}},
					{ text: '最近三个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', date);}},
					{ text: '半年前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 180);picker.$emit('pick', date);}},
					{ text: '去年',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 360);picker.$emit('pick', date);}},
					]
				},
				tableData: [
					{ 
						num:'2502000001', code:'1802', label: '普通药', status: '已过单', ks:'西药库',dw:'云南顺沛商',price:'2,638.00',gdTime:'2025-02-20',zf:'超级管理员',
						date:'2025-02-20',operatingTime:'2024-12-05 14：36：48',operator:'超级管理员',remark:'无关风月，我提序等你回。' ,dy:'1',
					},
					{
						num:'2502000002', code:'1803', label: '普通药', status: '已过单', ks:'西药库',dw:'宜宾九阵软件',price:'1,170.00',gdTime:'2025-02-20',zf:'超级管理员',
						date:'2025-02-20',operatingTime:'2024-12-05 14：36：48',operator:'超级管理员',remark:'无关风月，我提序等你回。' ,dy:'1',
					},
				],
				addForm:{}, // 新增参数 => 改状态 form表单 * 
				//props
				statusMap: {
					0: '草稿',
					1: '回退提交',
					2: '已提交',
					3: '回退审核',
					4: '已审核',
					5: '已过单',
					6: '已作废'
				},
				statusIconMap: {
					0: 'el-icon-document',
					1: 'el-icon-top-left',
					2: 'el-icon-check',
					3: 'el-icon-bottom-right',
					4: 'el-icon-document-checked',
					5: 'el-icon-success',
					6: 'el-icon-delete'
				},
				statusColorMap: {
					0: '#909399',
					1: '#67C23A',
					2: '#409EFF',
					3: '#E6A23C',
					4: '#409EFF',
					5: '#409EFF',
					6: '#F56C6C'
				},
			}
		},
		mounted() {
			this.addForm = addForm.map(v => {return v })[0]; // Form
			// 获取当前日期时间
			this.getNowDateTime();
			//获取动态盒子宽度，实时赋值给右侧 => this.$refs.mainRight.offsetWidth;
			this.$nextTick(()=>{
				this.updateWindowWidth();
				window.addEventListener('resize', this.updateWindowWidth);
			})
			this.tjsqrq = new Intl.DateTimeFormat('zh-CN').format(new Date());5
			this.tjsqr = JSON.parse(localStorage.getItem('userInfo')).username;
			this.addForm.nullifyId = JSON.parse(localStorage.getItem('userInfo')).userId;
			// 加载数据源
			this.loadData();
		},
		methods:{
			async loadData(){
				let res = await TcmPage({
					pageNum:this.pageNum,
					pageSize:this.pageSize,
					startTime:this.startTime,
					endTime:this.endTime,
					supplyCandidateId:'',
					putInDep:'',
					state:'',
					type:1
				});
				if(res.data == null || res.data == ''){
					this.$message({ type: 'error', message: res.message });
					this.tableData = [];
				}else{
					this.tableData = res.data.content
					this.totalSize = res.data.totalSize
				}
			},
			// 计算激活步骤（关键逻辑）
			calcActive(state) {
			  // 状态码与步骤索引的映射关系 => 状态0对应第1个步骤（索引从1开始）
			  const stateMap = { 0:1, 1:2, 2:3, 3:4, 4:5, 5:6, 6:7 }
			  // 返回当前状态对应的步骤索引 如果找不到则默认为0（不激活任何步骤）
			  return stateMap[state] || 0
			  // 或者更简单的数学计算（如果状态码是连续数字）： return Math.min(state + 1, this.statusOption.length)
			},
			// 开始时间变化值
			startDateHandle(value) {
				if (value) {
					// 使用 JavaScript 的 Date 对象格式化日期
					this.startTime = this.formatDate(value);
					this.loadData();
				} else {
					this.startTime = '';
				}
			},
			// 结束时间变化值
			endDateHandle(value){
				if (value) {
				  // 使用 JavaScript 的 Date 对象格式化日期
				  this.endTime = this.formatDate(value);
				  this.loadData();
				} else {
					this.endTime = '';
				}
			},
			// 表格行双击
			rowDblclick(v){
				v.name = '查看药品采购计划'
				this.$refs.exaRef.openModel(v)
			},
			// 表格单选
			handleCurrentTableChange(val){
				this.currentTable = val
			},
			// 草稿编辑
			handleClickEdit(row){
				if(row.state == 0){
					this.$refs.editSonRef.open(row) //打开编辑Model
				}else{
					this.$message.error('只有草稿单据才能被修改!');
				}
			},
			// 草稿删除
			handleDelete(row) {
				if(row.state == 0){
					this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
					  confirmButtonText: "确定",
					  cancelButtonText: "取消",
					  type: "warning",
					})
					  .then(async() => {
						// 状态 => 作废 
						this.addForm.id = row.id;
						this.addForm.state = 6;
						let result = await toExamineTcm(this.addForm)
						if (result.code === 200) {
							this.$message({ type: 'success', message: '已删除！'});
							this.loadData(); // 更新数据驱动
						} else {
							this.$message.error('删除失败！')
						}
					  })
					  .catch(() => {
						this.$message({ type: "info",message: '已取消'});
					  });
				}else{
					this.$message.error('只有草稿单据才能被删除!');
				}
			},
			// 当前日期时间
			formatDate(date) {
			      const year = date.getFullYear();
			      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
			      const day = String(date.getDate()).padStart(2, '0');
			      const hours = String(date.getHours()).padStart(2, '0');
			      const minutes = String(date.getMinutes()).padStart(2, '0');
			      const seconds = String(date.getSeconds()).padStart(2, '0');
			      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 将当前日期时间设置为夜晚十一点五十九分
			getNowDateTime(){
				// 获取当前日期时间
				const now = new Date();
				// 格式化日期时间
				// 将时间设置为凌晨十二点
				const midnight = new Date(now);
				midnight.setHours(0, 0, 0, 0);
				this.startTime = this.formatDate(midnight);
				// 将时间设置为夜晚十一点五十九分
				const evening = new Date(now);
				evening.setHours(23, 59, 0, 0);
				this.endTime = this.formatDate(evening);
			},
			// 时间处理
			changDate(val){
				let i = this.idx
				switch(i) {
					case 5:
					function formatDate(date) {
					  const year = date.getFullYear();
					  const month = (date.getMonth() + 1).toString().padStart(2, '0');
					  const day = date.getDate().toString().padStart(2, '0');
					  return `${year}-${month}-${day}`;
					}
					const now = new Date();
					// this.addForm.busDate = formatDate(val);
				}
			},
			// headers commond
			handleCommand(command) {
			  // console.log(command);
			  // 根据 command 值执行相应的逻辑
			  switch (command) {
				case 'a':
				  // 处理a的逻辑
				  this.auditStatus = ''
				  this.DropDownedName = '全部单据'
				  this.loadData();
				  break;
				case 'b':
				  // 处理b的逻辑
				  this.auditStatus = 2
				  this.DropDownedName = '已提交'
				  this.loadData();
				  break;
				case 'c':
				  // 处理b的逻辑
				  this.auditStatus = 4
				  this.DropDownedName = '已审核'
				  this.loadData();
				  break;
				// ... 其他 case
				case 'd':
				  // 处理b的逻辑
				  this.auditStatus = 5
				  this.DropDownedName = '已过单'
				  this.loadData();
				  break;
				case 'e':
				  // 处理e的逻辑
				  this.auditStatus = 6
				  this.DropDownedName = '已作废'
				  this.loadData();
				  break;
			  }
			},
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 页面刷新
						this.loading = true;
						setTimeout(() => {
							this.reload();
							this.$message({type:'success',message:'已刷新'})
							this.loading = false;		
						}, 1500)
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请2期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 2:
						// 处理索引2的逻辑 => 新增
						this.dialogVisible = true
						break;
				}
			},
			feetHandClick(i){
				// i event
				switch (i) {
					case 0:
					// 处理索引0的逻辑 => 冲销
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else if(this.currentTable.state != 5){
						this.$message({ type: 'error', message: '只能冲销已过单的数据！'});
					}else{
						if(this.currentTable){
							this.$confirm("确定需要作废选中的单据吗?", "提示", {
							  confirmButtonText: "确定",
							  cancelButtonText: "取消",
							  type: "warning",
							})
						  .then(async() => {
							// 状态 => 作废 
							this.addForm.id = this.currentTable.id;
							this.addForm.state = 6;
							let result = await toExamineTcm(this.addForm)
							if (result.code === 200) {
								this.$message({ type: 'success', message: '已作废！'});
								this.loadData(); // 更新数据驱动
							} else {
								this.$message.error('fail！')
							}
						  })
						  .catch(() => {
							this.$message({ type: "info",message: '已取消'});
						  });
						}
					}
					break;
					case 1:
					// 处理索引1的逻辑 => 新增
					this.$refs.sonRef.open(true)
					break;
					case 2:
					// 处理索引2的逻辑 => 提交 => 获取采购计划
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else if(this.currentTable.state != 0){
						this.$message({ type: 'error', message: '只能提交草稿数据！'});
					}else{
						this.currentTable.name = '草稿'
						this.$refs.exaRef.openModel(this.currentTable)
					}
					break;
					case 3:
					// 处理索引3的逻辑 => 审核 => 获取采购计划
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else if(this.currentTable.state != 2){
						this.$message({ type: 'error', message: '只能审核已提交的数据！'});
					}else{
						this.currentTable.name = '审核'
						this.$refs.exaRef.openModel(this.currentTable)
					}
					break;
					case 4:
					// 处理索引4的逻辑 => 过单 => 获取采购计划
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else if(this.currentTable.state != 4){
						this.$message({ type: 'error', message: '只能过单已审核的数据！'});
					}else{
						this.currentTable.name = '过单'
						this.$refs.exaRef.openModel(this.currentTable)
					}
					break;
					case 5:
					// 处理索引4的逻辑 => 查看明细 => 获取采购计划
					if(this.currentTable.length === 0){
						this.$message({ type: 'warning', message: '请先单击选择一条数据'});
					}else{
						this.currentTable.name = '查看药品采购计划'
						this.$refs.exaRef.openModel(this.currentTable)
					}
					break;
					
				}
			},
			// db events
			// col 里面包含了表头字段和名称，list 是表格数据
			columnWidth(col, list) {
			  let prop = col.prop,lab = col.lab;
			  let width = 40; // 设定一个最小值
			  let maxlenStr = ""; // 最长字符串
			  for (let info of list) {
				if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			  }
			  width = Math.max(width, len(lab), len(maxlenStr));
			  // 表格自带的内边距(20px) 自调
			  return width + 24; // 这里加了 12px
			  function len(str) {
				// 实际分配长度可根据需要自行调整
				let length = 12;
				for (const char of str + "") {
				  // 英文小写字符 8px
				  if ("a" <= char && char <= "z") length += 8;
				  // 英文大写字符 8px
				  else if ("A" <= char && char <= "Z") length += 8;
				  // 中文字符 28px
				  else if (char >= "\u4e00" && char <= "\u9fa5") length += 28;
				  // 其他 8px
				  else length += 12;
				}
				return length;
			  }
			},
			// addDiglog Close
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					done();
				  })
				  .catch(_ => {
				});
			},
			//分页
			//每页条数改变触发
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageNum = val;
				this.loadData();
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
				this.loadData();
			},
			// 实时宽度
			updateWindowWidth() {
				this.windowWidth = window.innerWidth - 228;
			},
		},
		filters: {
		formatTime(timestamp) {
		  if (!timestamp) return 'N/A'
		  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
		}
		},
	}
</script>

<style lang="less" scoped>
	/deep/ .el-step.is-horizontal .el-step__line{
		top: 20px;
	}
	/deep/ .el-select>.el-input{
		width: 88px;
	}
	/deep/ .el-step__title{
		font-size: 12px;
		width: 88px;
	}
	/deep/ .el-timeline-item{
		padding-bottom: 0;
	}
	/deep/ .demo-table-expand {
	    font-size: 0;
	  }
	/deep/ .demo-table-expand label {
	    width: 90px;
		margin-left: 18px;
	    color: #99a9bf;
	}
	/deep/ .el-form-item__content{
		color: #00557f;
		font-size: 12px;
	}
	/deep/ .demo-table-expand .el-form-item {
	    margin-right: 0;
	    margin-bottom: 0;
	    width: 48%;
	}
	/deep/ .el-dropdown{
		font-size: 12px;
		cursor: pointer;
	}
	// table
	
	/deep/ .el-table .cell{
		font-size: 12px;
		text-align: center;
	}
	/deep/ .el-step .is-success{
		color:#409EFF;
		border-color:#409EFF;
	}
	/deep/ .el-popper[x-placement^=bottom]{
		margin-top: 0;
	}
	/deep/ .el-dialog__header{
		padding: 12px;
		background-color: #007bb0;
	}
	/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
		margin-bottom: 6px;
	}
	/deep/ .el-dialog__title{
		font-size: 12px;
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
		background-color: brown;
	}
	/deep/ .el-link{
		font-size: 12px;
		margin-left: 8px;
	}
	.siting{
		
		.main-icon{
			
			.bottom{
				display: flex;
				align-items: center;
				padding: 8px;
				width: 100%;
				line-height: 40px;
				flex-wrap: wrap;
				.main-icon-b{
					display: flex;
					align-items: center;
					padding: 12px;
					width: 100%;
					margin-left: 8px;
				}
				.block{
					/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
						width: 176px;
					}
				}
			}
		}
		.table{
			margin-left: 8px;
			/* 自定义高亮颜色 */
			::v-deep .el-table__body tr.current-row > td {
			  background-color: #00557f !important;
			  color: #f9f9f9; /* 可选：修改文字颜色 */
			}
		}
		.feet{
			display: flex;
			justify-content: left;
			margin: 12px;
		}
	}
</style>